<template>
  <div v-if="Object.keys(sellerInfo).length!==0" class="seller">
    <img :src="sellerInfo.header_image" alt="">
    <div>
      <h4>{{sellerInfo.title}}</h4>
      <div class="text" :class="{'more':!isShow}">
        {{sellerInfo.brand_intros[0].brief}}
      </div>
      <div @click="handlerClick" class="view">
        {{isShow?'点击收起故事':'查看跟多故事'}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  naem:"Seller",
  data() {
    return {
      sellerInfo:{},
      isShow:false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      axios
        .get("/api/profile/seller")
        .then(res => {
          this.sellerInfo = res;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handlerClick(){
      this.isShow=!this.isShow
    }
  },
}
</script>

<style scoped>
.seller{
position: relative;
height: calc(100% - 10.66666vw);
padding: 20px 15px 0;
}
img{
width: 100%;
}
h4{
  margin-top: 20px;
  margin-bottom:10px ;
}
.text{
  font-size: 14px;
  line-height: 20px;
  text-align: justify;
}
.text.more {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

 .view {
  font-size: 16px;
  margin-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

</style>